import React, { useEffect, useState } from 'react'
import { Modal, NavBar, WhiteSpace, WingBlank, Icon, Button, InputItem } from 'antd-mobile'
import { Link } from 'react-router-dom'
import './index.less'
const alert = Modal.alert
export default function RegisterPhone(props) {
    let { history, location } = props
    // 判断是否传来有数据
    const prefix = '+' + (location.state || '86')
    let [isDisable, setIsDisable] = useState(true)
    let [phone, setPhone] = useState('')

    // 受控组件处理函数
    const handleInputChange = (value) => {
        const phoneReg = /^1[3,9][0,9]{9}$/
        if (phoneReg.test(value)) {
            setIsDisable(false)
        } else {
            setIsDisable(true)
        }
        setPhone(value)
    }
    // 按钮点击事件调转下一个页面
    const next = () => {
        alert(
            // 标题
            '',
            // 内容，可以是string也可是react.element
            `我们将验证码发送给${phone}这个手机号上`,
            [
                {
                    text: '同意',
                    onPress: () => console.log('cancel'),
                    style: {
                        backgroundColor: 'red',
                        color: '#fff',
                    },
                },
                { text: '不同意', onPress: () => {} },
            ]
        )
    }
    // 挂载的时候出现弹框
    useEffect(() => {
        alert(
            // 标题
            '硅谷注册',
            // 内容，可以是string也可是react.element
            <span>尚硅谷注册的注意事项</span>,
            [
                { text: '同意', onPress: () => console.log('cancel') },
                {
                    text: '不同意',
                    onPress: () => history.push('/register/code'),
                    style: {
                        backgroundColor: 'red',
                        color: '#fff',
                    },
                },
            ]
        )
    }, [])
    return (
        <div>
            <NavBar
                mode="light"
                icon={<Icon type="left" className="icon-left" />}
                onLeftClick={() => history.push('/register/code')}
            >
                硅谷注册
            </NavBar>
            <WingBlank size="lg">
                <WhiteSpace />
                <InputItem
                    value={phone}
                    onChange={handleInputChange}
                    clear
                    placeholder="请输入手机号"
                    className="input-item"
                >
                    <Link to="/countryPicker">
                        <span className="input-span">
                            <span>{prefix}</span>
                            <Icon type="down"></Icon>
                        </span>
                    </Link>
                </InputItem>
                <WhiteSpace />
                <Button type="primary" className="btn" disabled={isDisable} onClick={next}>
                    下一步
                </Button>
            </WingBlank>
        </div>
    )
}
